<template>
  <div>
    <div style="margin: 3px;">
      <!-- <img src="https://lmg.jj20.com/up/allimg/1112/112GPR626/1Q12FR626-9-1200.jpg" > -->
      <h1 style="font-size: 20px;text-align: center;">车位审核</h1>

      <el-select style="float: left;" @change="selectState(stallCheckState)" v-model="stallCheckState" clearable
        placeholder="选择审核状态">
        <el-option v-for="sl in stateList" :key="sl.stallCheckState" :label="sl.stallCheckName"
          :value="sl.stallCheckState">
        </el-option>
      </el-select>

      <el-select style="float: left;" @change="selectType(stallType)" v-model="stallType" clearable
        placeholder="选择车位类型">
        <el-option v-for="sl in typeList" :key="sl.stallType" :label="sl.stallTypeName"
          :value="sl.stallType">
        </el-option>
      </el-select>
    </div>

    <!-- 列表 -->
    <div style="border: 1px silver solid;width: 1200px;height: 500px;margin-top: 62px;">
      <el-table ref="multipleTable" :data="pageInfo.records" style="width: 100%;">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column prop="rentersRealName" label="姓名" width="80">
        </el-table-column>
        <el-table-column prop="rentersInfoCard" label="身份证号" width="180">
        </el-table-column>
        <el-table-column prop="stallType" label="车位类型" width="120">
          <template slot-scope="scope">
            <span>{{scope.row.stallType==0?'普通车位':'充电车位'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stallInfoArea" label="车位区域" width="80">
        </el-table-column>
        <el-table-column prop="stallInfoNum" label="车位编号" width="120">
        </el-table-column>
        <el-table-column width="150">
          <template slot="header" slot-scope="scope">车位购买证明</template>
          <template slot-scope="scope">
            <img style="width: 100px; height: 80px" :src="scope.row.stallBuyProve" :fit="fit">
          </template>
        </el-table-column>
        <el-table-column prop="stallCheckState" label="审核状态" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.stallCheckState==0?'已申请':scope.row.stallCheckState==1?'通过':'退回'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stallCheckNote" label="退单原因" width="170">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="setStatePass(scope.row,1)" size="small">通过</el-button>
            <el-button type="danger"  @click="setStateNoPass(scope.row,2)" size="small">退回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹窗 -->
      <el-dialog title="退单原因" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <!-- cols="60" rows="10" -->
        <textarea v-model="stallCheckNote"  ></textarea>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>


      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageInfo.current" :page-sizes="[1, 2, 3, 4]" :page-size="pageInfo.size"
        layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'StallCheck',
    data() {
      return {
        pageInfo: {},
        stallCheckState: '',
        stallType: '',
        fit: 'fill',
        stateList: [{
            stallCheckState: '0',
            stallCheckName: '已申请'
          },
          {
            stallCheckState: '1',
            stallCheckName: '通过'
          },
          {
            stallCheckState: '2',
            stallCheckName: '退回'
          },
        ],
        typeList: [{
            stallType: '0',
            stallTypeName: '普通车位'
          },
          {
            stallType: '1',
            stallTypeName: '充电车位'
          }
        ],
        dialogVisible:false,
        stallCheckNote:'',
        noPass:{}

      }
    },
    methods: {
      //确定
      confirm(){
        if(this.stallCheckNote!=''){
          this.$http.post("/stall/stallCheck/certifiedCheck.certified",{
            stallCheckId:this.noPass.stallCheckId,
            stallCheckState:this.stallCheckState,
            stallCheckNote:this.stallCheckNote
            }).then(resp=>{
            if(resp.data.code==200){
              this.showStallCheck()
              alert(resp.data.message)
            }else{
              alert(resp.data.message)
            }
          })
          this.stallCheckNote=''
          this.noPass = {}
          this.stallCheckState = ''
          this.dialogVisible = false
        }else alert("请完善退回原因")
      },

      //取消
      cancel(){
        this.stallCheckNote=''
        this.noPass = {}
        this.stallCheckState = ''
        this.dialogVisible = false
      },

      // 弹框取消按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      //退回
      setStateNoPass(row,state){
        this.dialogVisible = true
        this.stallCheckState = state
        this.noPass = row
      },


      //通过
      setStatePass(row,state){
        this.$http.post("/stall/stallCheck/certifiedCheck.certified",{
          stallCheckId:row.stallCheckId,
          stallCheckState:row.stallCheckState,
          stallCheckNote:row.stallCheckNote
          }).then(resp=>{
          if(resp.data.code==200){
            this.showStallCheck()
            alert(resp.data.message)
          }else{
            alert(resp.data.message)
          }
        })
      },

      //分页设置
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.showStallCheck(this.pageInfo.current, val)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.showStallCheck(val, this.pageInfo.size)
      },

      //车位类型
      selectType(stallType){
        this.common(null, null, this.stallCheckState, stallType)
      },

      //选择车位审核状态
      selectState(stallCheckState) {
        this.common(null, null, stallCheckState, this.stallType)
      },

      //展示全部
      showStallCheck(current, size) {
        this.common(current, size, this.stallCheckState, this.stallType)
      },

      //查询车位审核信息（公共，带条件）
      common(current, size, stallCheckState, stallType) {
        this.$http.post("/stall/stallCheck/certifiedSelect.certified", {
          size: size,
          current: current,
          stallCheckState: stallCheckState,
          stallType: stallType
        }).then(resp => {
          if (resp.data.code == 200) {
            this.pageInfo = resp.data.data
          } else {
            this.pageInfo = {}
          }
        })
      }
    },
    created() {
      this.showStallCheck()
    }
  }
</script>

<style>
</style>
